<template>
  <div class="limitdiv">
    <div style="margin: 20px;"></div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :rules="rules"
      ref="visitor"
      class="demo-ruleForm"
      :model="visitor"
    >
      <el-form-item label="访客ID">
        <el-input v-model="visitor.visitorId" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="访客姓名" prop="visitorName">
        <el-input v-model="visitor.visitorName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="visitorPhone">
        <el-input v-model="visitor.visitorPhone"></el-input>
      </el-form-item>
      <el-form-item label="到访时间" prop="visitorArrTime">
        <el-date-picker v-model="visitor.visitorArrTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="visitor.visitorCar"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('visitor')">确认修改</el-button>
        <el-button type="primary" @click="turnback" plain>返 回</el-button>
        <!-- <el-button @click="resetForm('visitor')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      visitor: {
        visitorId: "123",
        visitorName: "123",
        visitorPhone: "123",
        visitorCar: "HHHH",
        visitorArrTime: "2020/4/4"
      },
      rules: {
        visitorName: [
          { required: true, message: "请输入访客姓名", trigger: "blur" }
        ],
        visitorPhone: [
          { required: true, message: "请输入访客联系方式", trigger: "blur" },
          {
            pattern:
              "^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\\d{8}$",
            message: "仅支持中国大陆手机号"
          }
        ],
        visitorArrTime: [
          { required: true, message: "请输入到访时间", trigger: "blur" }
        ],
        visitorCar: []
      }
    };
  },
  created() {
    this.visitor.visitorId = this.$route.query.id;
    this.axios
      .post(
        "visitor/detailvisitor?visitorId=" +
          this.visitor.visitorId
      )
      .then(res => {
        this.visitor = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.visitor); //访客数据

          this.axios
            .post("visitor/addvisitor", this.visitor)
            .then(res => {
              if(res.data=="success-add-visitor"){
                this.$router.push('/index_manager/visitorhead')
              }
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    turnback() {
      this.$router.push("visitorhead/showvisitor");
    }
  },

  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
</style>
